import React, { useEffect } from 'react'
import { Select } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { getChannelAction } from '@/store/modules/article'

const { Option } = Select

export default function Channel({ width, value, onChange }) {
  const { channelList: channels } = useSelector(state => state.article)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getChannelAction())
  }, [dispatch])

  return (
    <Select placeholder="请选择文章频道" style={{ width }} value={value} onChange={onChange}>
      {channels.map(item => (
        <Option key={item.id} value={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  )
}
